/*
 * @Last Modified by: caiwenqi
 * @Last Modified time: 2020-07-29 09:20:32
 * 增加埋点
 */
/*
 * @Author: sunfuping
 * @Date: 2019-09-09 19:35:52
 * @Last Modified by: sunfuping
 * @Last Modified time: 2019-11-13 19:13:15
 * 产品日历
 */

<template>
    <div class="heightBox">
        <!-- 下拉刷新 -->
        <mt-loadmore :top-method="loadTop" ref="loadmore">
            <!-- 日历组件 -->
            <calendar v-on:passtoparent="currentIndexChild" ref="calendar"></calendar>
            <!-- 产品列表  上架-->
            <div class="aboutTo" v-show="!getListNoData1">
                <div class="projectNameBox">
                    <div class="projectName">
                        {{projectName}}
                    </div>
                </div>
                <div class='viewItem' v-for='(item,index) in getUpListData' :key="index" @click="goUrl(item)" htmdEvt="goUrl_grounding_btn">
                    <div class='viewItemMiddle' v-if="index<2">
                        <p class='itemTitle'>{{item.projectName}}</p>
                        <div class='itemData' :class="{'noLine': index == getUpListDataLen}">
                            <ul class='itemDataList'>
                                <li class='itemDataTop' v-if="item.incomeMode == 0">
                                    <p class='topResult' v-if="item.businessCompareReference">
                                        <b v-if="item.bigPerforMance">{{item.samllPerforMance}}<i>%~</i>{{item.bigPerforMance}}<i>%</i></b>
                                        <b v-else>{{item.samllPerforMance}}<i>%</i></b>
                                    </p>
                                    <p class='topResult' v-else>--</p>
                                    <p class='topTitle'>业绩比较基准</p>
                                </li>
                                <li class='itemDataTop' v-else>
                                    <p class='topResult' v-if="item.productRiskLevel == '' || item.productRiskLevel == null">--</p>
                                    <p class='topResult' v-else>{{productRiskLevelList[item.productRiskLevel]}}</p>
                                    <p class='topTitle'>产品风险等级</p>
                                </li>
                                <li class='itemDataCenter'>
                                    <p class='centerDate' v-if="item.projectTerm == '' || item.projectTerm == null"><span class="fontSize32">--</span><span>投资期限</span></p>
                                    <p class='centerDate' v-else><span class="fontSize32">{{item.projectTerm}} </span> <span>{{projectTermUnitList[item.projectTermUnit]}}投资期限</span></p>
                                    <p class='centerMoney'><span class="fontSize32">{{item.perInvestStart? item.perInvestStart : '--'}}</span><span> 万起购金额</span></p>
                                </li>
                                <!-- <li class='itemDataRight'>
                                    <button>立即预约</button>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                    <div class='viewItemMiddle' v-else v-show="isShow">
                        <p class='itemTitle'>{{item.projectName}}</p>
                        <div class='itemData'>
                            <ul class='itemDataList'>
                                <li class='itemDataTop' v-if="item.incomeMode == 0">
                                    <p class='topResult' v-if="item.businessCompareReference">
                                        <b v-if="item.bigPerforMance">{{item.samllPerforMance}}<i>%~</i>{{item.bigPerforMance}}<i>%</i></b>
                                        <b v-else>{{item.samllPerforMance}}<i>%</i></b>
                                    </p>
                                    <p class='topResult' v-else>--</p>
                                    <p class='topTitle'>业绩比较基准</p>
                                </li>
                                <li class='itemDataTop' v-else>
                                    <p class='topResult' v-if="item.productRiskLevel == '' || item.productRiskLevel == null">--</p>
                                    <p class='topResult' v-else>{{productRiskLevelList[item.productRiskLevel]}}</p>
                                    <p class='topTitle'>产品风险等级</p>
                                </li>
                                <li class='itemDataCenter'>
                                    <p class='centerDate' v-if="item.projectTerm == '' || item.projectTerm == null"><span class="fontSize32">--</span><span>投资期限</span></p>
                                    <p class='centerDate' v-else><span class="fontSize32">{{item.projectTerm}} </span> <span>{{projectTermUnitList[item.projectTermUnit]}}投资期限</span></p>
                                    <p class='centerMoney'><span class="fontSize32">{{item.perInvestStart? item.perInvestStart: '--'}}</span><span> 万起购金额</span> </p>
                                </li>
                                <!-- <li class='itemDataRight'>
                                    <button>立即预约</button>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="select" @click="select" v-if="getUpListData.length > 2" htmdEvt="select_grounding_btn"><i v-show="isShow" class="iconfont">&#xe632;</i><i v-show="!isShow" class="iconfont">&#xe623;</i></div>
            </div>
            <!-- 产品列表 封账 -->
            <div class="aboutTo sealingAccount" :class="{sealingAccount:getUpListStatus != 1000 }" v-show="!getListNoData" >
                <div class="projectNameBox">
                    <div class="projectName">
                        {{projectNameToday}}
                    </div>
                </div>
                <div class='viewItem' v-for='(item,index) in getSealListData' :key="index" @click="goUrl(item)" htmdEvt="goUrl_sealAccount_btn">
                    <div class='viewItemMiddle' v-if="index<2">
                        <p class='itemTitle'>{{item.projectName}}</p>
                        <div class='itemData' :class="{'noLine': index == getSealListDataLen}">
                            <ul class='itemDataList'>
                                <li class='itemDataTop' v-if="item.incomeMode == 0">
                                    <p class='topResult' v-if="item.businessCompareReference">
                                        <b v-if="item.bigPerforMance">{{item.samllPerforMance}}<i>%~</i>{{item.bigPerforMance}}<i>%</i></b>
                                        <b v-else>{{item.samllPerforMance}}<i>%</i></b>
                                    </p>
                                    <p class='topResult' v-else>--</p>
                                    <p class='topTitle'>业绩比较基准</p>
                                </li>
                                <li class='itemDataTop' v-else>
                                    <p class='topResult' v-if="item.productRiskLevel == '' || item.productRiskLevel == null">--</p>
                                    <p class='topResult' v-else>{{productRiskLevelList[item.productRiskLevel]}}</p>
                                    <p class='topTitle'>产品风险等级</p>
                                </li>
                                <li class='itemDataCenter'>
                                    <p class='centerDate' v-if="item.projectTerm == '' || item.projectTerm == null"><span class="fontSize32">--</span><span>投资期限</span></p>
                                    <p class='centerDate' v-else><span class="fontSize32">{{item.projectTerm}} </span> <span>{{projectTermUnitList[item.projectTermUnit]}}投资期限</span></p>
                                    <p class='centerMoney'><span class="fontSize32">{{item.perInvestStart? item.perInvestStart: '--'}}</span><span> 万起购金额</span> </p>
                                </li>
                                <!-- <li class='itemDataRight'>
                                    <button>立即预约</button>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                    <div class='viewItemMiddle' v-else v-show="isTodayShow">
                        <p class='itemTitle'>{{item.projectName}}</p>
                        <div class='itemData'>
                            <ul class='itemDataList'>
                                <li class='itemDataTop' v-if="item.incomeMode == 0">
                                    <p class='topResult' v-if="item.businessCompareReference">
                                        <b v-if="item.bigPerforMance">{{item.samllPerforMance}}<i>%~</i>{{item.bigPerforMance}}<i>%</i></b>
                                        <b v-else>{{item.samllPerforMance}}<i>%</i></b>
                                    </p>
                                    <p class='topResult' v-else>--</p>
                                    <p class='topTitle'>业绩比较基准</p>
                                </li>
                                <li class='itemDataTop' v-else>
                                    <p class='topResult' v-if="item.productRiskLevel == '' || item.productRiskLevel == null">--</p>
                                    <p class='topResult' v-else>{{productRiskLevelList[item.productRiskLevel]}}</p>
                                    <p class='topTitle'>产品风险等级</p>
                                </li>
                                <li class='itemDataCenter'>
                                    <p class='centerDate' v-if="item.projectTerm == '' || item.projectTerm == null"><span class="fontSize32">--</span><span>投资期限</span></p>
                                    <p class='centerDate' v-else><span class="fontSize32">{{item.projectTerm}} </span> <span>{{projectTermUnitList[item.projectTermUnit]}}投资期限</span></p>
                                    <p class='centerMoney'><span class="fontSize32">{{item.perInvestStart? item.perInvestStart: '--'}}</span><span> 万起购金额</span> </p>
                                </li>
                                <!-- <li class='itemDataRight'>
                                    <button>立即预约</button>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="select" @click="selectToday" v-if="getSealListData.length > 2" htmdEvt="select_sealAccount_btn"><i v-show="isTodayShow" class="iconfont">&#xe632;</i><i v-show="!isTodayShow" class="iconfont">&#xe623;</i></div>
            </div>
            <no-data :showNoData="showNoData" :noPage="noPage" :show="show"></no-data>
        </mt-loadmore>

	</div>
</template>

<script  type="text/javascript">

import "./productCalendar.less";
// import splitUrl from "@common/js/splitUrl.js";
import calendar from '@src/common/components/richgoH5/calendar/calendar.vue'
// import tipAction from '@common/components/otherComponents/tipAction/tipAction'
//暂无数据
import noData from '@src/common/components/noData/noData'

export default {
    name: "productCalendar",
    components: {
		calendar,noData,
	},
    data() {
        return {
            calendarIndex: '',
            showNoData: false,
            noPage: 'noPage',
            show: 'show',
            getListNoData:false,
            getListNoData1:false,
            isShow: false,
            isTodayShow: false,
            projectName: '今日上架',
            projectNameToday: '今日封账',
            itemList: Object,
            getUpListData: Array,
            getSealListData:Array,
            getUpListDataLen: Number,
            getSealListDataLen: Number,
            getUpListStatus: '',
            getSealListStatus: '',
            projectTermUnitList:['天','个月','年'],
            productRiskLevelList:['','保守级','稳健级','平衡级','成长级','进取级'],
        };
    },

    watch: {
        getUpListData(newVal) {
            this.getUpListDataLen = newVal.length - 1;
        },
        getSealListData(newVal) {
            this.getSealListDataLen = newVal.length - 1;
        }
    },
    methods: {
        // 下拉刷新
        loadTop() {
            // 加载更多数据
            this.$refs.loadmore.onTopLoaded();
            this.$refs.calendar.addClass(this.calendarIndex, this.itemList)
        },
        // 上架的下拉控制
        select() {
            this.isShow = ! this.isShow;
        },

        // 封账的下拉控制
        selectToday() {
            this.isTodayShow = ! this.isTodayShow;
        },

        // 初始化数据
        initData() {
            this.getUpList();
            this.getSealList();
        },

        // 列表名字的转换
        currentIndexChild(obj) {
            let item = obj.item;
            let position = obj.position;
            if(item.today != 2) {
                this.projectName = '即将上架';
                this.projectNameToday = '即将封账';
            } else{
                this.projectName = '今日上架';
                this.projectNameToday = '今日封账';
            };
            // 切换的时候重置下拉菜单
            this.isShow = false;
            this.isTodayShow = false;

            this.calendarIndex = position;
            this.itemList = Object.assign({}, this.itemList, item);
            this.initData();
        },

        // 上架接口请求
        getUpList() {
            var that = this;
            var isNow = this.itemList.today == 2 ? 1 :2;
            this.$axiosHttp.http({
                    name:'',
                    url: apiUrl.getUpListApi,
                    needFailCallback: true,
                    method: 'POST',
                    params: {
                        isNow: isNow,
                        upTime: this.itemList.date
                    }
            }, (res) => {
                let data = res.data.data;
                var data1 = this.splitData(data);
                this.getListNoData1 = false;
                this.showNoData = false;
                this.getUpListData = data1;
            },null,res => {
                this.getUpListStatus = res.data.status;
                if(this.getUpListStatus == 1000) {
                    this.getListNoData1 = true;
                    this.getUpListData = [];
                    this.showNoData = this.getListNoData && this.getListNoData1 ? true : false;
                } 
            })
        },

        // 上架数据请求
        getSealList() {
            this.$axiosHttp.http({
                    name:'',
                    url: apiUrl.getSealListApi,
                    needFailCallback: true,
                    method: 'POST',
                    params: {
                        sealTime: this.itemList.date,
                    }
            }, (res) => {
                let data = res.data.data;
                var data1 = this.splitData(data);
                this.getListNoData = false;
                this.showNoData = false;
                this.getSealListData = data1;
            },null,res => {
                this.getSealListStatus = res.data.status;
                if(this.getSealListStatus == 1000) {
                    this.getListNoData = true;
                    this.getSealListData = [];
                    this.showNoData = this.getListNoData && this.getListNoData1 ? true : false;
                }
            })
        },

        // 分解数据
        splitData(data) {
            for(var i in data) {
                if(data[i].businessCompareReference){
                    if(data[i].businessCompareReference.indexOf('~') == -1){//说明只有一个数据
                        data[i].samllPerforMance = data[i].businessCompareReference.split('%')[0];
                        data[i].bigPerforMance = null;
                    }else{
                        data[i].samllPerforMance = data[i].businessCompareReference.split('~')[0].split('%')[0];
                        data[i].bigPerforMance = data[i].businessCompareReference.split('~')[1].split('%')[0];
                    };
                };
            };
            return data;
        },

        // 产品详情
        goUrl(item) {
            let projectId = item.projectId ? item.projectId : '数据为空';
            let projectStatus = item.projectStatus ? item.projectStatus : '数据为空';
            let projectName = item.projectName ? item.projectName : '数据为空';
            let productId = item.productId ? item.productId : '数据为空';
            let buyRate = "数据为空";
            let objItem = {projectName:projectName,projectId:projectId,productId:productId,buyRate:buyRate};
            if(item.projectSystem == 1) { //私募
                window.jsObj.gotoprivateDetails(JSON.stringify(objItem));
            } else if(item.projectSystem == 2) { //通用模式
                window.jsObj.gotoJJSProPage("productDetail?projectId=" + projectId,projectId,projectStatus);
            } else if(item.projectSystem == null) { //如果返回null 默认私募
               window.jsObj.gotoprivateDetails(JSON.stringify(objItem));
            }
        },
    },

};

</script>
